<template>
	<view class="seeking">
		<!-- 轮播图 -->
		<u-swiper :list="swiperData" keyName="image" height="150rpx" showTitle autoplay circular></u-swiper>
		<!-- 装饰 -->
		<view class="decorate"></view>
		<!-- 选项 -->
		<view class="selects">
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in selectCard" :key="listIndex" @click="clickGrid">
					<u--image :showLoading="true" :src="listItem.img" width="30px" height="30px"></u--image>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<!-- 搜索 -->
			<view class="search">
				<u-search height="45rpx" bgColor="#fff" borderColor="#a8a8a8" :showAction="false" placeholder="请输入ID号/昵称/等查询" v-model="searchInp"></u-search>
				<text style="margin: 0 20rpx;" @click="vagueSearch">搜索</text>
				<u-button @click="conditionSearch" :customStyle="{borderRadius: '10rpx',width:'100rpx',height:'45rpx',padding:'0 60rpx'}" color="#7cc5eb" text="条件搜索"></u-button>
			</view>
		</view>
		<!-- 会员列表 --> 
		<view class="user_list" v-show="user_list.isShowList">
			<userListCard @clickCard="clickCard" :data="item" v-for="item in user_list.list" :key="item.id" ></userListCard>
			<!-- 为空 -->
			<u-empty v-show="user_list.list.length==0" mode="list" icon="https://cdn.uviewui.com/uview/empty/history.png"></u-empty>
		</view>
		<!-- 条件查询选择 -->
		<view class="conditionS" v-show="isCondition">
			<view class="talent_title">按条件搜索</view>
			<u-cell-group :border="false">
				<u-cell :title="item.title" v-for="item in CellTalent" :key="item.title" rightIcon="arrow-right" arrow-direction="down">
					<template #value >
						<view :style="{'width': '80rpx'}">
							<u--input placeholder="不限" border="none" v-model="item.value"></u--input>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 条件查询按钮 -->
		<view class="condition_btn" v-if="isCondition">
			<u-button @click="reset" :customStyle="{borderRadius: '10rpx',width:'100rpx',height:'45rpx',padding:'0 60rpx',color:'#000'}" color="#e6e6e6" text="重置"></u-button>
			<u-button @click="startSearch" :customStyle="{borderRadius: '10rpx',width:'100rpx',height:'45rpx',padding:'0 60rpx'}" color="#7cc5eb" text="开始搜索"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {onMounted, reactive, ref} from "vue";
	import { useStore } from "vuex";
	import { user_listReq } from "../../api/user";
	// vuex
	const store=useStore()
	// 用户信息
	const {userID}=store.state.user.data.info
	// 轮播图数据
	const swiperData = reactive([{
			image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
		},
		{
			image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
		},
		{
			image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
		},
	])
	// 选项数据
	const selectCard = reactive([{
			img: '/static/imgs/shuaige.png',
			title: '高富帅'
		},
		{
			img: '/static/imgs/baifum.png',
			title: '白富美'
		},
		{
			img:userID==1?'/static/imgs/jiali.png':'/static/imgs/caijun.png',
			title:userID==1?'佳丽':'才俊'
		},
		{
			img: '/static/imgs/dongtai.png',
			title: '动态'
		},
		{
			img: '/static/imgs/bianji.png',
			title: '编辑资料'
		}
	])
	// ecll会员列表
	const CellTalent=reactive([
		{title:'年龄',value:'',name:'age'},
		{title:'婚姻情况',value:'',name:'marital'},
		{title:'现居城市',value:'',name:'cur_address'},
		{title:'身高',value:'',name:'height'},
		{title:'学历',value:'',name:'education'},
		{title:'月薪',value:'',name:'salary'},
		{title:'职业',value:'',name:'profession'},
		{title:'户口',value:'',name:'reg_address'},
		{title:'住房情况',value:'',name:'house'},
		{title:'购车情况',value:'',name:'car'},
		{title:'星座',value:'',name:'zodiac'},
		{title:'属相',value:'',name:'constellation'},
	])
	// 会员列表数据
	const user_list=reactive({
		list:[],
		isShowList:true
	})
	// 点击宫格
	const clickGrid=(name)=>{
		// 编辑择偶要求
		if(name==4){
			uni.navigateTo({
				url:'/pages/selectRequ/selectRequ'
			})
		}
	}
	// 搜索框内容
	const searchInp=ref('')
	// 是否条件查询
	const isCondition=ref(false)
	// 请求会员列表
	const getUserList=async(data)=>{
		let res=await user_listReq(data)
		user_list.list=res.data.data.list
	}
	// 点击搜索/模糊搜索
	const vagueSearch=()=>{
		getUserList({type:'4',val:searchInp.value})
	}
	// 点击条件查询
	const conditionSearch=()=>{
		isCondition.value=!isCondition.value
		user_list.isShowList=!user_list.isShowList
	}
	// 点击重置
	const reset=()=>{
		CellTalent.forEach(item=>{
			item.value=''
		})
	}
	// 点击开始搜索
	const startSearch=()=>{
		user_list.isShowList=true
		isCondition.value=false
		// 组装数据
		let reqObj={}
		CellTalent.forEach(item=>{
			if(item.value=='') return
			reqObj[item.name]=item.value
		})
		getUserList({type:'5',...reqObj})
	}

	// 点击单个会员列表查看详情
	const clickCard=(id)=>{
		console.log(id);
		uni.navigateTo({
			url:`/pages/details/details?id=${id}`,
		})
	}
	onMounted(()=>{
		getUserList({type:userID==1?'3':'2'})
	})
</script>

<style lang="scss">
	.seeking {
		background: #f3f3ed;
		padding: 0 0 30rpx 0;
		.decorate {
			width: 100%;
			height: 60rpx;
			background-image: linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186));
		}

		.selects {
			position: relative;
			top: -20rpx;
			width: calc(100% - 60rpx);
			margin: 0 30rpx;
			background: #fff;
			.u-grid {
				height: 170rpx;
				background: #fff;
				align-items: center;
			}

			.u-grid-item {
				height: 100%;
			}

			.grid-text {
				margin-top: 20rpx;
				font-size: 28rpx
			}
			.search{
				display: flex;
				padding: 50rpx 20rpx;
			}
		}
		.user_list{
			width: calc(100% - 60rpx);
			margin: 0 30rpx;
		}
		.conditionS{
			width: calc(100% - 100rpx);
			margin: 0 30rpx;
			background: #fff;
			padding: 20rpx;
			.talent_title{
				font-weight: bold;
				border-left: 3px solid #9d84f5;
				padding-left: 20rpx;
			}
		}
		.condition_btn{
			display: flex;
			justify-content: space-evenly;
			width: calc(100% - 60rpx);
			padding: 30rpx;
			background: #fff;
			margin-top: 20rpx;
		}
	}
</style>
